<template>
	<view class="uni-searchbar">
		<view :style="{ borderRadius: radius + 'rpx', backgroundColor: bgColor }" class="uni-searchbar__box" @click="searchClick">
			<view class="icon-search"></view>
			<input
				v-if="show"
				:focus="showSync"
				:placeholder="placeholder"
				:maxlength="maxlength"
				@confirm="confirm"
				class="uni-searchbar__box-search-input"
				confirm-type="search"
				type="text"
				v-model="searchVal"
			/>
			<view v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</view>
			<view v-if="show && (clearButton === 'always' || (clearButton === 'auto' && searchVal !== ''))" class="uni-searchbar__box-icon-clear" @click="clear">
				<uni-icons color="#8A8C8D" class="clear" size="20" type="clear" />
			</view>
		</view>
		<text @click="cancel" class="uni-searchbar__cancel" v-if="cancelButton === 'always' || (show && cancelButton === 'auto')">{{ cancelText }}</text>
	</view>
</template>

<script>
import uniIcons from '../uni-icons/uni-icons.vue';
export default {
	name: 'UniSearchBar',
	components: {
		uniIcons
	},
	props: {
		placeholder: {
			type: String,
			default: '快速搜索'
		},
		radius: {
			type: [Number, String],
			default: 5
		},
		clearButton: {
			type: String,
			default: 'auto'
		},
		cancelButton: {
			type: String,
			default: 'auto'
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		bgColor: {
			type: String,
			default: '#F8F8F8'
		},
		maxlength: {
			type: [Number, String],
			default: 100
		}
	},
	data() {
		return {
			show: false,
			showSync: false,
			searchVal: ''
		};
	},
	watch: {
		searchVal() {
			this.$emit('input', {
				value: this.searchVal
			});
		}
	},
	methods: {
		searchClick() {
			if (this.show) {
				return;
			}
			this.searchVal = '';
			this.show = true;
			this.$nextTick(() => {
				this.showSync = true;
			});
		},
		clear() {
			this.searchVal = '';
		},
		cancel() {
			this.$emit('cancel', {
				value: this.searchVal
			});
			this.searchVal = '';
			this.show = false;
			this.showSync = false;
			// #ifndef APP-PLUS
			uni.hideKeyboard();
			// #endif
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
		confirm() {
			// #ifndef APP-PLUS
			uni.hideKeyboard();
			// #endif
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
			this.$emit('confirm', {
				value: this.searchVal
			});
		}
	}
};
</script>

<style lang="scss" scoped>
$uni-searchbar-height: 36px;
.icon-search {
	background: url(https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/search.png) center center no-repeat;
	background-size: 28rpx 28rpx;
	width: 28rpx;
	height: 28rpx;
	display: inline-block;
	margin-right: 8rpx;
}
.uni-searchbar {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	position: relative;
	padding: 12rpx 40rpx;
	background-color: #fff;
}

.uni-searchbar__box {
	display: flex;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	flex: 1;
	justify-content: flex-start;
	align-items: center;
	height: 60rpx;
	padding: 11rpx 21rpx;
	background-color: #f7f7f7;
}

.uni-searchbar__box-icon-search {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	width: 45rpx;
	justify-content: center;
	align-items: center;
	color: #8a8c8d;
}

.uni-searchbar__box-search-input {
	flex: 1;
	font-size: 26rpx;
	color: #66645D;
}

.uni-searchbar__box-icon-clear {
	align-items: center;
	line-height: 48rpx;
	padding-left: 10rpx;
	
	.clear {
		vertical-align: middle;
	}
}

.uni-searchbar__text-placeholder {
	font-size: 26rpx;
	color: #8a8c8d;
}

.uni-searchbar__cancel {
	padding-left: 20rpx;
	line-height: $uni-searchbar-height;
	font-size: 26rpx;
	color: $uni-text-color;
}
</style>
